<template>
  <div id="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      xAxisData: ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30', '03:00', '03:30', '04:00', '04:30', '05:00', '05:30', '06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00'],
      seriesData: []
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData(){
      axios.get("http://localhost:9999/api-cockpit/orders/getDataMorning").then(res=>{
        this.seriesData = res.data.data;
        console.log(this.seriesData)
        this.echartsInit();
      })

    },
    echartsInit(){
      console.log("seriesData",this.seriesData)
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('chartContainer'));

      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            type: 'line',
            areaStyle: {},
            data: this.seriesData
          }
        ]
      });
      console.log("seriesData2",this.seriesData)
    }
  }
}
</script>
